<template>
    <a-table :size="size" :loading="loading" :bordered="bordered" :pagination="pagination.total==0?false:pagination"
             :columns="columns" :rowKey="(record,index) =>rowKey? record[rowKey] : index" :dataSource="dataSource" :rowSelection="rowSelection"
             :scroll="scroll" :customRow="customRow" @change="changeTable">
        <template v-for="item in tableEditKey" v-slot:[item.title]="slotProps" :key="item.title">
            <div>
                <slot :name="item.title" :record="slotProps"> </slot>
            </div>
        </template>
    </a-table>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, watch} from "vue";
export default defineComponent({
    name: "CommonTable",
    props: {
        loading: {
            type: Boolean,
            default: false
        },
        bordered: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'middle'
        },
        columns: {
            type: Array,
            default: () => {
                return []
            }
        },
        dataSource: {
            type: Array,
            default: () => {
                return []
            }
        },
        tableEditKey: {
            type: Array,
            default: () => {
                return []
            }
        },
        rowSelection: {
            type: Object,
            default: () => {
                return null
            }
        },
        pagination: {
            type: Object,
            default: () => {
                return {
                    current: 0,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        scroll: {
            type: Object,
            default: () => {
                return {
                    x: 1000,
                    y: 640
                }
            },
        },
        // 给表格行添加唯一key的key值
        rowKey: {
            type: String,
            defualt: 'id'
        },
        customRow: {
            type: Function,
            default: () => {
                return () => {}
            }
        },
        isTableBtn: {
            type: Number,
            default: 360,
        }
    },
    setup(props, ctx) {
        const changeTable = (val: any) => {
            const params = {
                type: 'pagination',
                val: val
            }
            ctx.emit('handleChange', params)
        };
        const screenWidth = ref(document.body.clientWidth); //屏幕宽度
        const screenHeight = ref(document.body.clientHeight); //屏幕高度
        onMounted(() => {
            window.onresize = () => {
                return (() => {
                    screenWidth.value = document.body.clientWidth;
                    screenHeight.value = document.body.clientHeight;
                })()
            };
            const yValue = screenHeight.value - props.isTableBtn;
            ctx.emit('scrollChange', yValue)
        });
        // 定义 watch 监听
        watch(screenHeight, (val, oldVal) => {
            screenHeight.value = val;
            setTimeout(function() {
                const yValue = screenHeight.value - props.isTableBtn;
                ctx.emit('scrollChange', yValue)
            }, 400)
        });
        return {
            // handleChange,
            changeTable
        }
    }

})
</script>

<style scoped>

</style>